<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./g2.js"></script>

<body>
    <div id="container"></div>
</body>
<script>
    const data = [
        { year: '1951 年', sales: 38 },
        { year: '1952 年', sales: 52 },
        { year: '1956 年', sales: 61 },
        { year: '1957 年', sales: 145 },
        { year: '1958 年', sales: 48 },
        { year: '1959 年', sales: 38 },
        { year: '1960 年', sales: 38 },
        { year: '1962 年', sales: 38 },
    ];
    const chart = new G2.Chart({
        container: 'container',
        width: 500,
        height: 500,
    });

    chart.data(data);
    chart.scale('sales', {
        nice: true,
    });

    chart.tooltip({
        showMarkers: true,
    });
    chart.interaction('active-region');

    chart.interval().position('year*sales').shape('tick').color('year');
    chart.point().position('year*sales').shape('square').color('year');
    chart.area().position('year*sales');
    chart.line().position('year*sales').color('red').shape('smooth');

    chart.render();

</script>

</html>